<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Blank Page - Ace Admin</title>

		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="assets/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="no-skin">
		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>



			<div id="modal-table" class="modal fade" tabindex="-1">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header no-padding">
							<div class="table-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									<span class="white">&times;</span>
								</button>
								标题
							</div>
						</div>

						<div class="modal-body no-padding" id="modal-value">  <!--modal-content-->
							<form class="form-horizontal" role="form" id="mainform">
								<input type="hidden" name="id" />
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" > 班级 </label>

									<div class="col-sm-9">
										<input type="text" name="name" placeholder="请输入班级" class="col-xs-10 col-sm-5" />
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"> 年级段</label>
									<div class="col-sm-2">
										<select class="form-control" name="gradeLevel">
											<option value="">--请选择--</option>
											<option value="1">托班</option>
											<option value="2">小班</option>
											<option value="3">中班</option>
											<option value="4">大班</option>
											<option value="5">学前班</option>
										</select>
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"> 老师</label>
									<div class="col-sm-2">
										<select class="form-control" name="aid" id="sel-teacher">

										</select>
									</div>
								</div>
								<div class="clearfix form-actions">
									<div class="col-md-offset-3 col-md-9">
										<button class="btn btn-info" type="button" onclick="submitMainform()">
											<i class="ace-icon fa fa-check bigger-110"></i>
											提交
										</button>
									</div>
								</div>
							</form>
						</div>

					</div><!-- /.modal-content -->
				</div><!-- /.modal-dialog -->
			</div>




			<div class="main-content" style="padding:0px 3px;">
				<div class="main-content-inner">
					<div class="page-content" style="padding:0px;">
						<div class="row" style="margin:5px;">
							<div class="col-xs-12" style="padding:5px 5px;">
								<!-- PAGE CONTENT BEGINS -->

									<div class="col-xs-12" style="padding:2px 5px;">
										<!--<a  class="btn btn-sm btn-primary" href="#modal-table" role="button" class="green" data-toggle="modal"> 新增 </a>-->
										<table id="table-school" class="table  table-bordered table-hover">
											<thead>
												<tr>
													<th width="8%" class='center'>班级ID</th>
													<th width="25%">名称</th>
													<th width="25%">老师</th>
													<th></th>
													<!--<th></th>-->
												</tr>
											</thead>
											<tbody>

											</tbody>
										</table>
									</div><!-- /.span -->
								    <div class="hr hr-18 dotted hr-double"></div>
								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->



		<!--[if !IE]> -->
		<script src="assets/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<![endif]-->
		<script src="assets/js/jquery-1.11.3.min.js"></script>
		<!-- basic scripts -->
		<script src="assets/js/a-my-common.js"></script>

		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->

		<!-- ace scripts -->
		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->
<script>

	//---------------MOKS Customize area----------------------BEG
    var grid_result=[];
	function operation(oper,id){
		var obj;
		if("edit" == oper){
			$(grid_result).each(function(i,item){
				if(id==item.cid){
					obj = item;
					return false;
				}
			});

			loadTeacherSelect("sel-teacher");

			$("input[name='id']").val(id);
			$("input[name='name']").val(obj.name);
			$("select[name='grade']").val(obj.grade);
			$("select[name='aid']").val(obj.aid);
			$("#modal-table").modal();

		}else if("upgrade" == oper){
			mymyAlert("升班");
		}else if("graduate" == oper){
			mymyAlert("毕业");
		}else if("delete" == oper){
			mymyAlert("删除");
		}else{}

	}
	function createOperationTd(id){
		var td = "" +
				"<div class='hidden-sm hidden-xs btn-group'>" +
						"<button class='btn btn-xs btn-info' onclick=operation('edit','"+id+"')>"+
						"<i class='ace-icon fa fa-pencil bigger-120'></i>"+
				        "编辑"+
						"</button>"+
						"<button class='btn btn-xs btn-warning' onclick=operation('upgrade','"+id+"')>"+
						"<i class='ace-icon fa fa-flag bigger-120'></i>"+
						"升班"+
						"</button>"+
						"<button class='btn btn-xs btn-success' onclick=operation('graduate','"+id+"')>"+
						"<i class='ace-icon fa fa-check bigger-120'></i>"+
						"毕业"+
						"</button>"+
						"<button class='btn btn-xs btn-danger' onclick=operation('delete','"+id+"')>"+
						"<i class='ace-icon fa fa-trash-o bigger-120'></i>"+
						"删除"+
						"</button>"
				"</div>";
		return td;
	}


	function loadData(){
		$(document).ready(function(){
			$.ajax({
				type:'get',
				url:URL_GOBAl+"/web/school/class/list",
				headers:{
					token:sessionStorage.token
				},
				async:false,
				data:{},
				dataType:'json',
				success:function(returnValue){
					if(returnValue != "" && returnValue !=null & returnValue !=undefined){

						var status = returnValue.status;
						var result = returnValue.result;

						if("000000" == status){
						  grid_result=result;

						  var tableSchool = $("#table-school tbody");
                          for(var i=0;i<result.length;i++){
							  var obj = result[i];
							  var tr = $("<tr></tr>");

							  tr.append("<td class='center'>"+obj.cid+"</td>");
							  tr.append("<td>"+obj.name+"</td>");
							  tr.append("<td>"+obj.teacher+"</td>");
							  var operationTd = createOperationTd(obj.cid);
							  tr.append("<td>"+operationTd+"</td>");
							  tableSchool.append(tr);
						  }

						}else{
							myAlert("请求失败，请检测网络后重新加载！");
						}
					}else{
						myAlert("请求返回值为空，请检测用户权限！");
					}
				},
				error:function(XMLHttpRequest, textStatus, errorThrown){
				}
			});
		});
	}

	loadData();



	function submitMainform(){

		var data = JSON.stringify(serializeObject("mainform")); //自动将form表单封装成json
		console.log("data="+data);

		$.ajax({
			type:'POST',
			url:URL_GOBAl+"/web/class/create",
			async:false,
			contentType: "application/json",
			headers:{
				token:sessionStorage.token
			},
			data : data,
			dataType:'json',
			success:function(returnValue){
				if(returnValue != "" && returnValue !=null & returnValue !=undefined){
					var status = returnValue.status;
					var result = returnValue.result;
					if("000000" == status){
						myAlert("保存成功！");
					}else{
						myAlert("保存失败，原因："+result);
					}
				}else{
					myAlert("保存失败！");
				}
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				myAlert("保存失败");
			}
		});
	}


	//---------------MOKS Customize area----------------------END

</script>
	</body>
</html>
